<template>
  <div class="order-details">
    <order-details-header :orderstatus="detailsData.orderstatus"></order-details-header>
    <order-details-header-info :detailsData="detailsData"></order-details-header-info>
    <div class="order-details-dividing-big" />
    <order-details-cell :detailsData="detailsData"></order-details-cell>
    <div class="order-details-dividing-big" />
    <order-details-bottom :detailsData="detailsData"></order-details-bottom>
    <order-details-btns :detailsData="detailsData"></order-details-btns>
  </div>
</template>

<script>
import orderDetailsHeader from './details-header'
import orderDetailsHeaderInfo from './details-header-info'
import orderDetailsCell from './details-header-cell'
import orderDetailsBottom from './details-bottom'
import orderDetailsBtns from './details-btns'
import mixins from '@/mixins'
export default {
  name: 'order-details',
  mixins: [mixins],
  data () {
    return {
      orderid: '',
      detailsData: {}
    }
  },
  methods: {
    async requestNet () {
      this.detailsData = await this.$ajax.get('/tOrder/orderDetail.json', {orderid: this.orderid})
      // this.detailsData.orderstatus = '1'
    }
  },
  mounted () {
    this.orderid = this.$route.query.orderid
    this.requestNet()
  },
  components: {
    orderDetailsHeader,
    orderDetailsHeaderInfo,
    orderDetailsCell,
    orderDetailsBottom,
    orderDetailsBtns
  }
}
</script>

<style lang="stylus" scoped>
.order-details {
  min-height: 90vh;
  background: RGBA(248, 248, 248, 1);
  padding-bottom: 96px;

  .order-details-dividing-big {
    width: 100%;
    height: 15px;
    background: RGBA(248, 248, 248, 1);
  }

  .bottom-btns {
    height: 90px;
  }
}
</style>
